import React, { useCallback, useMemo, useState } from 'react'
import style from './Index.module.less'
import ReactEchartsCore from 'echarts-for-react/lib/core'
import * as echarts from 'echarts/core'
import { MapChart } from 'echarts/charts'
import { TooltipComponent, VisualMapComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import { Skeleton } from 'antd'
import mapData from '@js/heilongjiang_map.json'
import classNames from 'classnames'
import { formatMoney } from '@src/assets/js/tool'

echarts.use([MapChart, TooltipComponent, VisualMapComponent, CanvasRenderer])
echarts.registerMap('HLJ', mapData)

function getOptions (data, current, city) {
  const l = data && data.alllist instanceof Array ? data.alllist : []
  let max = 0
  const res = l.map(li => {
    const o = { name: li.address, structure: li.name }
    switch (current) {
      case '案件数':
        o.value = li.case_count || 0
        break
      case '案件标的':
        o.value = li.dispute_amount || 0
        break
      case '仲裁员数':
        o.value = li.arbitrator || 0
        break
      case '仲裁秘书数':
        o.value = li.staff_num || 0
        break
      default:
        o.value = 0
    }
    max = Math.max(max, o.value)
    if (li.address === city) {
      o.itemStyle = {
        borderWidth: 2
      }
    }
    return o
  })
  return {
    tooltip: {
      trigger: 'item',
      showDelay: 0,
      transitionDuration: 0.2,
      formatter: (d) => {
        const o = d.data
        if (!o || (!o.structure)) {
          return '无'
        }
        return `${o.structure}<br />${o.value}`
      }
    },
    visualMap: {
      bottom: 100,
      left: 0,
      min: 0,
      max,
      text: ['高', '低'],
      realtime: false,
      calculable: true,
      inRange: {
        color: ['lightskyblue', 'yellow', 'orangered']
      }
    },
    series: [
      {
        name: '黑龙江省',
        type: 'map',
        map: 'HLJ',
        label: {
          show: true
        },
        geoIndex: 0,
        data: res,
        emphasis: {
          label: {
            show: true
          }
        }
      }
    ]
  }
}

function Main ({ data, ready = true }) {
  const typeOptions = ['案件数', '案件标的', '仲裁员数', '仲裁秘书数']
  const [current, setCurrent] = useState('案件数')
  const [city, setCity] = useState('哈尔滨市')
  const cityData = useMemo(() => {
    if (data && data.alllist) {
      const o = data.alllist.find(li => li.address === city)
      if (o) {
        return o
      }
    }
    return {}
  }, [data, city])
  const option = useMemo(() => {
    return getOptions(data, current, city)
  }, [data, current, city])
  const click = useCallback((e) => {
    setCity(e.name)
  }, [])
  return (
    <div className={style.container}>
      <div className={style.infos}>
        <div className={style.info}>
          <span className={style['info-label']}>{city}案件数量：</span>
          <span className={style['info-num']}>{cityData.case_count || 0}</span>
          <span className={style['info-unit']}>件</span>
        </div>
        <div className={style.info}>
          <span className={style['info-label']}>{city}仲裁秘书数量：</span>
          <span className={style['info-num']}>{cityData.staff_num || 0}</span>
          <span className={style['info-unit']}>位</span>
        </div>
        <div className={style.info}>
          <span className={style['info-label']}>{city}案件标的：</span>
          <span className={style['info-num']}>{formatMoney(cityData.dispute_amount || 0)}</span>
          <span className={style['info-unit']}>元</span>
        </div>
        <div className={style.info}>
          <span className={style['info-label']}>{city}仲裁员数量：</span>
          <span className={style['info-num']}>{data.arbitrator || 0}</span>
          <span className={style['info-unit']}>位</span>
        </div>
      </div>
      <div className={style.map}>
        <div className={style.options}>
          {typeOptions.map((li, i) => {
            return (
              <div className={classNames(style.option, { [style.active]: current === li })} key={i} onClick={() => setCurrent(li)}>
                <span>{li}</span>
              </div>
            )
          })}
        </div>
        <div className={style['map-inner']}>
          {ready ? (
            <ReactEchartsCore style={{ width: '100%', height: '100%' }} echarts={echarts} option={option} onEvents={{ click }} />
          ) : (
            <div className={style['loading-box']}>
              <Skeleton active />
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default Main
